<template>
	<view class="main-container">
		<HeaderBar title="意见反馈" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>

		<view class="callback_background">
			<view class="callback-content">
				<view class="callback-top-row">
					<view class="callback-left-tip">
						<text class="tip-hello">Hello</text>
						<text class="tip-text">有什么好的建议可以分享下哦~</text>
					</view>
					<image class="callback-right-image"
						src="http://img.abatour.com/2025-05-04/25296d7af99edfe10208d70da6f6ca97f36e353012ee4-6DFznz_fw1200@2x_1746352225041.png" mode=""></image>
				</view>
				<view class="callback-content-input">
					<textarea style="margin-bottom: 10rpx;" placeholder-style="color:#A7A7A7;font-size:25rpx"
						maxlength="10000" v-model="formData.memo" placeholder="请填写10个字以上的内容，以便我们为您提供更好的服务" />
					<wd-upload  :limit="3" :file-list="formData.imgUrl" @change="changeFile" action="https://api.jowong.com/common/file/upload" image-mode="aspectFill"
						custom-evoke-class="callback-upload-image"
						custom-preview-class="callback-upload-image"></wd-upload>
					<view class="textarea-top-card">
						<text>我的反馈</text>
						<image class="top-card-icon"
							src="http://img.abatour.com/2025-05-04/未命名 -1_4@2x_1746352286322.png" mode=""></image>
					</view>
				</view>
				<!-- 联系人信息 -->
				<view class="callback-contactWay-container">
					<text>联系人</text>
					<input placeholder-style="color:#A7A7A7;font-size:29rpx" type="text" placeholder="请输入您的姓名"
						v-model="formData.contactName" />
				</view>
				<view class="callback-contactWay-container">
					<text>联系电话</text>
					<input placeholder-style="color:#A7A7A7;font-size:29rpx" type="text" placeholder="请输入您的手机号"
						v-model="formData.contactPhone" />
				</view>
			<wd-message-box selector="wd-message-box-slot">
			 <view class="message-box-content">
			 	<view class="message-box-content-left">
			 		<image class="message-box-content-image"
			 			src="http://img.abatour.com/2025-05-04/成功@2x_1746352327221.png" mode=""></image>
			 	</view>
				<view class="message-box-content-right">	
					<text class="right-success-tip">提交成功</text>
					<text class="right-callback-thank">感谢您的反馈</text>
				</view>
			 </view>
			</wd-message-box>
				<wd-gap safe-area-bottom height="30"></wd-gap>
			</view>
			<view class="callback-submit-btn" @click="submitCallback">
				提交
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,reactive,nextTick
	} from "vue";
	import HeaderBar from "@/components/HeaderBar/index.vue";
	import { useMessage } from 'wot-design-uni';
	import {
		postCallback
	} from '../../api/fiveMajor'
import deepClone from "@/utils/deepClone";
	const message = useMessage('wd-message-box-slot')
	const loading = ref(false);
	const headerBgc = ref("transparent");
	const titleColor = ref("#2D2D2D");
	const clickLoading = ref(false);
	const memo = ref('')
	const callbackUserName = ref('')
	const callbackPhoneNum = ref('')
	const callbackImageList = ref([])
	const formData=reactive({
		memo:"",
		contactName:"",
		contactPhone:"",
		imgUrl:[]
	})
	const changeFile=({ fileList: files })=> {
	  formData.imgUrl = files.map(item=>item.url)
	}
	const submitCallback = () => {
		let queryData=deepClone(formData)
		if(queryData.memo.trim() === '') return uni.showToast({
			icon:"none",
			title:'反馈内容为空！'
		})
		const regex = /[^0-9-]/;
		// 电话校验 座机、短号及海外号码
		if(regex.test(queryData.contactPhone)) return uni.showToast({
			icon:'none',
			title:'电话号码有误，请核对后再提交'
		})
		if(queryData.imgUrl.length) queryData.imgUrl=formData.imgUrl.join(',')
		else queryData.imgUrl=''
		postCallback(queryData).then((res)=>{
      let {result} = res;
			if(result.success) successMessage()
			else{
				uni.showToast({
					icon:'error',
					title:'提交失败，请稍后再试'
				})
			}
		})
		.catch(err=>{
			uni.showToast({
				icon:'error',
				title:'提交失败，请稍后再试'
			})
		})
	};
	/**
	 * 提交成功弹窗
	*/
	const successMessage =()=> {
	  message.alert({
		  cancelButtonText:'',
		  confirmButtonText:'查看',
		  confirmButtonProps:{
			  type:"success",
			  customClass:"confirmBtnClass"
		  }
	  }).then((response)=>{
		  if(response.action=="confirm"){
			  console.log(response)
			  uni.navigateTo({
			  	url:"/fiveMajorSubPack/pages/hospitable/callbackList",
			  })
		  }
	  }).catch(err=>{
		  uni.navigateBack()
	  })
	}
</script>
<style lang="scss" scoped>
	::v-deep() {
	  .wd-message-box {
	    .confirmBtnClass {
	      background-color: #1B9C61 !important;
		  margin: auto;
		  collor:#fff;
		  border-radius: 10rpx !important;
		  width: 277rpx;
		  height: 69rpx;
		  line-height: 69rpx;
	    }
	  }
	}
	.message-box-content{
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 106rpx 0 50rpx;
		.message-box-content-image{
			width: 75rpx;
			height: 75rpx;
		}
		.message-box-content-right{
			margin-left: 26rpx;
			display: flex;
			flex-direction: column;
			align-items: start;
			.right-success-tip{
				font-weight: 1000;
				color: #333333;
				font-size: 41rpx;
			}
			.right-callback-thank{
				color:#777777;
				font-size: 22rpx;
				font-weight: bold;
				margin-top: 11rpx;
			}
		}
	}
	.callback_background {
		height: 100vh;
		padding: 158rpx 28rpx 80rpx;
		overflow: hidden;
		background: linear-gradient(to bottom, #b4cab7 30px, #eeefe7 100px);
		box-sizing: border-box;
		position: relative;
		.callback-submit-btn{
			box-sizing: border-box;
			position: fixed;
			bottom: 50rpx;
			left: 27rpx;
			width: calc(100% - 54rpx);
			background-color: #1B9C61;
			font-weight: bold;
			color:#EEF0DF;
			height: 83rpx;
			font-size: 29rpx;
			z-index: 9999;
			border-radius: 10rpx;
			text-align: center;
			line-height: 83rpx;
		}
		.callback-content::-webkit-scrollbar {
			  display: none; /* Chrome/Safari */
			}
		.callback-content {
			height: 100%;
			overflow-y: scroll;
			width: 100%;
			position: flex;
			flex-direction: column;
			-ms-overflow-style: none; /* IE/Edge */
			scrollbar-width: none; /* Firefox */
		}

		.callback-top-row {
			box-sizing: border-box;
			width: 100%;
			padding: 29rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.callback-left-tip {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				color: #2B2B24;

				.tip-hello {
					font-size: 41rpx;
					font-weight: bold;
				}

				.tip-text {
					font-size: 25rpx;
				}
			}

			.callback-right-image {
				width: 188rpx;
				height: 177rpx;
			}
		}

		.callback-content-input {
			position: relative;
			width: 100%;
			box-sizing: border-box;
			margin-top: 36rpx;
			background-color: #fff;
			padding: 45rpx 28rpx 20rpx;
			border-radius: 10rpx;

			textarea {
				width: 100%;
				height: 329rpx;
			}

			// ::v-deep .callback-upload-image{
			// 	height: 92rpx;
			// 	width: 92rpx;
			// }
			.textarea-top-card {
				box-sizing: border-box;
				position: absolute;
				top: -80rpx;
				left: 27rpx;
				padding-top: 10rpx;
				width: 256rpx;
				height: 80rpx;
				border-radius: 10rpx 10rpx 0 0;
				background-color: #1B9C61;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 29rpx;
				font-weight: bold;

				.top-card-icon {
					width: 29rpx;
					height: 34rpx;
					margin-left: 9rpx;
				}
			}
		}

		.callback-contactWay-container {
			box-sizing: border-box;
			border-radius: 10rpx;
			width: 100%;
			padding: 28rpx;
			background-color: #fff;
			margin-top: 27rpx;

			text {
				font-weight: bold;
				font-size: 29rpx;
			}

			input {
				margin-top: 39rpx;
			}
		}
	}

	.main-container {
		min-height: 100vh;

		.vlog-container {
			padding: 0 28rpx;
		}
	}
</style>